<template>
	<view>
		<view class="title">
			<view class="img">
				<image src="../../static/img/zu428@2x.png" mode=""></image>
			</view>
			<view class="center">
				<h2>立即登录</h2>
				<p>登录后可收藏喜欢的菜谱</p>
			</view>
			<view class="right">
				>
			</view>
		</view>
		<!-- 图标 -->
		<view class="icon">
			<image src="../../static/img/mengbanzu87@2x.png" mode=""></image>
		</view>
		<!-- 收藏，点赞 -->
		<view class="do-message">
			<view class="collection">

				<image src="../../static/img/soucang@2x.png" mode=""></image>
				<text>我的收藏</text>
			</view>
			<view class="collection">

				<image src="../../static/img/mengbanzu 281@2x.png" mode=""></image>
				<text>浏览记录</text>
			</view>
			<view class="collection">

				<image src="../../static/img/mengbanzu 272@2x.png" mode=""></image>
				<text>点赞</text>
			</view>
		</view>
		<view class="foodMenu">
			<scroll-view scroll-x="true" class="scroll-view_H" enable-flex>

				<view  v-for="(item,index) in menu" :key="item._id"
					:class="{active:foodId==index,'scroll-view-item':true}" @click="changeFood(index)">{{item.name}}
				</view>


			</scroll-view>

			<view class="foodCart" v-for="(item,index) in menu" :key="item._id" v-if="foodId==index">
				<view class="item1" v-for="(element,i) in collect[index]">
					<text>{{element.name}}</text>
					<text>{{element.number}}</text>

				</view>
				<!-- <uni-collapse>
					<uni-collapse-item title="展开内容">
						<view class="" v-for="(element,i) in item.ingredient">
							<text v-if="i>=2">{{element.name}}</text>
							<text v-if="i>=2">{{element.number}}</text>
							
						</view>

					</uni-collapse-item>

				</uni-collapse> -->
				<uni-collapse @change='add' v-if="collect1[index].length>0">
					<!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
					<uni-collapse-item title-border="none" :border="false" :show-arrow='false' >
						<template v-slot:title v-if="falg==1">
							<uni-list>
								<uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon">
									展开全部
								</uni-list-item>
							</uni-list>
						</template>
						<view class="content"  v-for="(element,i) in collect1[index]">
							<text>{{element.name}}</text>
							<text>{{element.number}}</text>
						</view>
						<!-- <template v-slot:title>
							<uni-list>
								<uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon">
									展开全部
								</uni-list-item>
							</uni-list>
						</template> -->
					</uni-collapse-item>
				</uni-collapse>
			</view>

		</view>
		<!-- 我的菜谱 -->
		<view class="news">
			<h1>我的菜谱</h1>
			<scroll-view class="scroll-view_H recommend" scroll-x="true">
				<view class="recommend-item" v-for="item in menu" :key="item._id">
					<view class="top">
						<image :src="item.coverpic"></image>
						<image src="../static/img/zu488@2x.png" class="time"></image>
					</view>
					<h3>{{item.name}}</h3>
					
				</view>
			</scroll-view>
		</view>
		
	</view>


</template>

<script>
	import {
		getCollectionApi
	} from "@/apis/mine.js"
	export default {
		data() {
			return {
				menu: [],
				foodId: '',
				falg:1,
				collect:[],
				collect1:[]
			};
		},
		methods: {
			getCombo() {
				let {
					_id
				} = uni.getStorageSync('userinfo')
				let obj = {
					data: {
						_id
					}
				}
				getCollectionApi(obj).then(res => {

					this.menu = res.mycollect
					this.menu.forEach(item=>{
					this.collect.push(item.ingredient.slice(0,4))
					this.collect1.push(item.ingredient.slice(4,item.length))
					})
					console.log(11,this.collect);
					console.log(12,this.collect1);
				})
			},
			changeFood(index) {
				this.foodId = index
				this.falg=1
			},
			add(){
				this.falg=0
			}

		},
		onShow() {
			
			this.getCombo()
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		display: flex;

		padding: 0 16rpx;
		box-sizing: border-box;

		.img {
			width: 116rpx;
			height: 116rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.center {
			margin-left: 12rpx;
			padding-top: 22rpx;
			box-sizing: border-box;

			h2 {
				font-weight: bold;
			}

			p {
				font-size: 28rpx;
			}
		}

		.right {
			padding-top: 44rpx;
			margin-left: 200rpx;
			box-sizing: border-box;
		}
	}

	.icon {
		width: 688rpx;
		height: 120rpx;
		margin: 40rpx auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.do-message {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10rpx;

		.collection {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	.foodMenu {
		padding-left: 32rpx;
		margin-top: 70rpx;

		.scroll-view_H {
			white-space: nowrap;
			display: flex;
			flex-wrap: nowrap;
			width: 100%;
			height: 100rpx;
			// line-height: 100rpx;
			text-align: center;
			font-size: 36rpx;

			.scroll-view-item {
				// height: 300rpx;
				// line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
				margin-right: 30rpx;
			}
		}

		text {
			margin-right: 36rpx;
		}

		.active {
			color: orange;
		}
	}
	.news {
		margin-bottom: 38rpx;
		padding-left: 32rpx;
		margin-top: 30rpx;
	}
	
	.recommend {
		// display: grid;
		// grid-template-columns: repeat(2,1fr);
		// gap: 10rpx;
		// padding: 20rpx;
		// box-sizing: border-box;
		white-space: nowrap;
		width: 100%;
		margin-top: 28rpx;
	
		.recommend-item {
			display: inline-block;
			// width: 100%;
			// height: 300rpx;
			// line-height: 300rpx;
			// text-align: center;
	
			margin-right: 12rpx;
			color: black;
	
			.top {
				width: 314rpx;
				height: 220rpx;
				position: relative;
	
				image {
					width: 100%;
					height: 100%;
				}
	
				.time {
					position: absolute;
					bottom: 12rpx;
					right: 10rpx;
					width: 82rpx;
					height: 24rpx;
				}
			}
	
			.bottom {
				display: flex;
	
				.left {
					text {
						font-size: 28rpx;
						color: gray;
					}
	
					image {
						width: 34rpx;
						height: 28rpx;
						vertical-align: middle;
					}
				}
	
				.right {
					text {
						font-size: 28rpx;
						color: gray;
					}
	
					image {
						width: 34rpx;
						height: 28rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}
</style>
